<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NexusGo - 东京探险</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        "background": "#ffffff",
                        "foreground": "#000000",
                        "muted": "#6b7280", // Gray-500
                        "border": "#e5e7eb", // Gray-200
                        "card": "#f9fafb",   // Gray-50
                    },
                    fontFamily: {
                        "display": ["'Noto Sans SC'", "Plus Jakarta Sans", "sans-serif"],
                    },
                    borderRadius: {
                        "DEFAULT": "0.5rem",
                        "lg": "0.75rem",
                        "xl": "1rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
</head>
<body class="bg-background font-display text-foreground">
<div class="flex flex-col h-screen">
<header class="flex items-center justify-between whitespace-nowrap border-b border-border px-6 py-3 bg-background/80 backdrop-blur-sm z-20">
<div class="flex items-center gap-4">
<a class="flex items-center gap-3" href="#">
<div class="size-8 text-foreground">
<svg fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24 45.8096C19.6865 45.8096 15.4698 44.5305 11.8832 42.134C8.29667 39.7376 5.50128 36.3314 3.85056 32.3462C2.19985 28.361 1.76794 23.9758 2.60947 19.7452C3.451 15.5145 5.52816 11.6284 8.57829 8.5783C11.6284 5.52817 15.5145 3.45101 19.7452 2.60948C23.9758 1.76795 28.361 2.19986 32.3462 3.85057C36.3314 5.50129 39.7376 8.29668 42.134 11.8833C44.5305 15.4698 45.8096 19.6865 45.8096 24L24 24L24 45.8096Z"></path>
</svg>
</div>
<h1 class="text-xl font-bold tracking-[-0.015em]">NexusGo</h1>
</a>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-muted hover:text-foreground text-sm font-medium transition-colors" href="#">首页</a>
<a class="text-foreground text-sm font-bold transition-colors" href="#">我的行程</a>
<a class="text-muted hover:text-foreground text-sm font-medium transition-colors" href="#">发现灵感</a>
<a class="text-muted hover:text-foreground text-sm font-medium transition-colors" href="#">关于我们</a>
</nav>
<div class="flex items-center gap-4">
<button class="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-100 text-muted hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined text-xl">notifications</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="User avatar placeholder" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC4S8DuddcIcmPr7bTiSHJ1CyYTwBYt5i4KVmJQGli0aJaAOZZLXKaMVjkOfVwq1EjfgHjKTHkxVJEqurCFPILLadwY_8bHJ5sFPd2kBMIjJojYdPqoQgROrJ0-_-JSJlmz5yegdt0NizcUZxCI3GBNtJm7hBueUdu1uYJBQgDfON6J4hyEkxZNGSm00qFb3v02EYkKIJMniFmRfFXy_sgDEm_WAfLmPCZwdZb6_H4HoPD3Sj47mI07LRjZN5XWUzMB69o6gVcKUw");'></div>
</div>
</header>
<main class="flex-1 grid grid-cols-1 lg:grid-cols-[480px_1fr_360px] overflow-hidden">
<div class="flex flex-col bg-background border-r border-border overflow-y-auto">
<div class="p-6 pb-4 border-b border-border">
<div class="flex flex-wrap justify-between gap-4 items-start">
<div class="flex flex-col gap-1">
<h2 class="text-foreground text-3xl font-black tracking-[-0.033em]">东京探险</h2>
<p class="text-muted text-base font-normal">2024年7月15日 - 2024年7月22日</p>
</div>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-foreground text-background text-sm font-bold hover:opacity-90 transition-opacity">
<span class="truncate">保存行程</span>
</button>
</div>
<div class="flex justify-between items-center mt-4">
<div class="flex gap-1">
<button class="p-2 text-muted rounded-md hover:bg-gray-100 transition-colors"><span class="material-symbols-outlined text-xl">share</span></button>
<button class="p-2 text-muted rounded-md hover:bg-gray-100 transition-colors"><span class="material-symbols-outlined text-xl">download</span></button>
</div>
<button class="flex items-center gap-2 rounded-lg h-9 px-3 text-sm font-bold bg-gray-100 text-foreground hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined text-lg">auto_awesome</span>
<span>AI 智能优化</span>
</button>
</div>
</div>
<div class="sticky top-0 bg-background/80 backdrop-blur-sm z-10">
<div class="px-6">
<div class="flex border-b border-border gap-6 overflow-x-auto -mb-px">
<a class="flex shrink-0 flex-col items-center justify-center border-b-[3px] border-b-foreground text-foreground pb-3 pt-4" href="#"><p class="text-sm font-bold">第一天</p></a>
<a class="flex shrink-0 flex-col items-center justify-center border-b-[3px] border-b-transparent text-muted hover:text-foreground pb-3 pt-4" href="#"><p class="text-sm font-bold">第二天</p></a>
<a class="flex shrink-0 flex-col items-center justify-center border-b-[3px] border-b-transparent text-muted hover:text-foreground pb-3 pt-4" href="#"><p class="text-sm font-bold">第三天</p></a>
<a class="flex shrink-0 flex-col items-center justify-center border-b-[3px] border-b-transparent text-muted hover:text-foreground pb-3 pt-4" href="#"><p class="text-sm font-bold">第四天</p></a>
<a class="flex shrink-0 flex-col items-center justify-center border-b-[3px] border-b-transparent text-muted hover:text-foreground pb-3 pt-4" href="#"><p class="text-sm font-bold">第五天</p></a>
</div>
</div>
</div>
<div class="flex-1 p-6 space-y-4">
<div class="grid grid-cols-[40px_1fr] gap-x-4">
<div class="flex flex-col items-center gap-2 pt-1">
<div class="flex items-center justify-center size-8 rounded-full bg-card text-foreground"><span class="material-symbols-outlined text-lg">mosque</span></div>
<div class="w-px bg-border h-full"></div>
</div>
<div class="flex flex-1 flex-col pb-6">
<p class="text-foreground text-base font-medium">参观浅草寺</p>
<p class="text-muted text-sm font-normal">上午 9:00</p>
</div>
<div class="flex flex-col items-center gap-2">
<div class="flex items-center justify-center size-8 rounded-full bg-card text-foreground"><span class="material-symbols-outlined text-lg">restaurant</span></div>
<div class="w-px bg-border h-full"></div>
</div>
<div class="flex flex-1 flex-col pb-6">
<p class="text-foreground text-base font-medium">在一兰拉面享用午餐</p>
<p class="text-muted text-sm font-normal">中午 12:30</p>
</div>
<div class="flex flex-col items-center gap-2">
<div class="flex items-center justify-center size-8 rounded-full bg-card text-foreground"><span class="material-symbols-outlined text-lg">joystick</span></div>
<div class="w-px bg-border h-full"></div>
</div>
<div class="flex flex-1 flex-col pb-6">
<p class="text-foreground text-base font-medium">探索秋叶原电器街</p>
<p class="text-muted text-sm font-normal">下午 3:00</p>
</div>
<div class="flex flex-col items-center gap-2">
<div class="flex items-center justify-center size-8 rounded-full bg-card text-foreground"><span class="material-symbols-outlined text-lg">cell_tower</span></div>
<div class="w-px bg-border h-full"></div>
</div>
<div class="flex flex-1 flex-col pb-6">
<p class="text-foreground text-base font-medium">东京晴空塔</p>
<p class="text-muted text-sm font-normal">傍晚 6:00</p>
</div>
</div>
<button class="w-full flex items-center justify-center gap-2 rounded-lg h-10 text-sm font-bold bg-card text-foreground hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined text-lg">add</span>
<span>添加活动</span>
</button>
</div>
</div>
<div class="relative bg-gray-200 overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center" data-alt="显示行程中已固定位置的东京互动地图。" data-location="Tokyo" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC4-2uzIvtyz1Q9FGdj2gENy8jQdfYGExz9B68pSeTkA34U0Las9qpWFI2A8R-rHwN-icBHI5U3jgPuo6G4KO38OYk8OwbwYCawZnrhfMW1ET-vvvufsgranTxXIlwLIMsWAOiUVuAda_MDW6MzzgVKcM92v80xhyZTQd1nRF906L9Cm7V7eh8TzyRYqGIglZS8Meva6MRR-r1lATfN2JitoR8rl8AI7klzXl-qcbsC18SxE4eKonqF5U5A1E5aITqrsM5cr2LLBA'); filter: grayscale(1) contrast(0.8) brightness(0.9);"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
<div class="absolute bottom-6 right-6 flex flex-col gap-2">
<button class="flex items-center justify-center h-10 w-10 rounded-lg bg-background/80 backdrop-blur-sm shadow-lg text-foreground hover:bg-background/90 transition-colors">
<span class="material-symbols-outlined text-xl">add</span>
</button>
<button class="flex items-center justify-center h-10 w-10 rounded-lg bg-background/80 backdrop-blur-sm shadow-lg text-foreground hover:bg-background/90 transition-colors">
<span class="material-symbols-outlined text-xl">remove</span>
</button>
</div>
</div>
<div class="flex flex-col bg-background border-l border-border">
<div class="p-4 border-b border-border">
<h3 class="text-lg font-bold text-foreground">行程讨论</h3>
<div class="flex -space-x-2 mt-2">
<div class="inline-block size-8 rounded-full ring-2 ring-background bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC4S8DuddcIcmPr7bTiSHJ1CyYTwBYt5i4KVmJQGli0aJaAOZZLXKaMVjkOfVwq1EjfgHjKTHkxVJEqurCFPILLadwY_8bHJ5sFPd2kBMIjJojYdPqoQgROrJ0-_-JSJlmz5yegdt0NizcUZxCI3GBNtJm7hBueUdu1uYJBQgDfON6J4hyEkxZNGSm00qFb3v02EYkKIJMniFmRfFXy_sgDEm_WAfLmPCZwdZb6_H4HoPD3Sj47mI07LRjZN5XWUzMB69o6gVcKUw");'></div>
<div class="inline-block size-8 rounded-full ring-2 ring-background bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDUEJ3KX9toLz5qdK5Pg8TfRuLkN8DwO7tiVRK9TkiLFWBJcAhEy83lv76Rg9yDFRF4jiC4choIUDJ4-jxUtV8chaa5_y7LPXuAu1SGxMSOtymEAqbF6YOUa4eIn5TvWBm1ng30Ooml90u3XbzbuQvzfqzAj5srnwXgflcPTiTBUuiT7hzQ-Om5rcYN-mfp1ASTQrtEZBoSindVUDDAeIza6-QqPzXD1v5gI1d9CoaVQiqPnH8jaWd6caIijDQSu5nAkH81nyuzVg')"></div>
<div class="inline-block size-8 rounded-full ring-2 ring-background bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDUEJ3KX9toLz5qdK5Pg8TfRuLkN8DwO7tiVRK9TkiLFWBJcAhEy83lv76Rg9yDFRF4jiC4choIUDJ4-jxUtV8chaa5_y7LPXuAu1SGxMSOtymEAqbF6YOUa4eIn5TvWBm1ng30Ooml90u3XbzbuQvzfqzAj5srnwXgflcPTiTBUuiT7hzQ-Om5rcYN-mfp1ASTQrtEZBoSindVUDDAeIza6-QqPzXD1v5gI1d9CoaVQiqPnH8jaWd6caIijDQSu5nAkH81nyuzVg')"></div>
<button class="flex items-center justify-center size-8 rounded-full ring-2 ring-background bg-gray-200 text-muted hover:bg-gray-300 transition-colors">
<span class="material-symbols-outlined text-base">add</span>
</button>
</div>
</div>
<div class="flex-1 p-4 space-y-4 overflow-y-auto">
<div class="flex items-start gap-3">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDUEJ3KX9toLz5qdK5Pg8TfRuLkN8DwO7tiVRK9TkiLFWBJcAhEy83lv76Rg9yDFRF4jiC4choIUDJ4-jxUtV8chaa5_y7LPXuAu1SGxMSOtymEAqbF6YOUa4eIn5TvWBm1ng30Ooml90u3XbzbuQvzfqzAj5srnwXgflcPTiTBUuiT7hzQ-Om5rcYN-mfp1ASTQrtEZBoSindVUDDAeIza6-QqPzXD1v5gI1d9CoaVQiqPnH8jaWd6caIijDQSu5nAkH81nyuzVg')"></div>
<div class="flex-1">
<div class="bg-card p-3 rounded-lg rounded-tl-none">
<p class="text-sm font-medium text-foreground">小明</p>
<p class="text-sm text-foreground/80 mt-1">我们第一天晚上要不要去涩谷看看？听说那里很热闹。</p>
</div>
<p class="text-xs text-muted mt-1">下午 2:30</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDUEJ3KX9toLz5qdK5Pg8TfRuLkN8DwO7tiVRK9TkiLFWBJcAhEy83lv76Rg9yDFRF4jiC4choIUDJ4-jxUtV8chaa5_y7LPXuAu1SGxMSOtymEAqbF6YOUa4eIn5TvWBm1ng30Ooml90u3XbzbuQvzfqzAj5srnwXgflcPTiTBUuiT7hzQ-Om5rcYN-mfp1ASTQrtEZBoSindVUDDAeIza6-QqPzXD1v5gI1d9CoaVQiqPnH8jaWd6caIijDQSu5nAkH81nyuzVg')"></div>
<div class="flex-1">
<div class="bg-card p-3 rounded-lg rounded-tl-none">
<p class="text-sm font-medium text-foreground">小红</p>
<p class="text-sm text-foreground/80 mt-1">好主意！我刚看到一个推荐，涩谷SKY的夜景超美！</p>
</div>
<p class="text-xs text-muted mt-1">下午 2:32</p>
</div>
</div>
<div class="flex items-start gap-3 justify-end">
<div class="flex-1 order-1">
<div class="bg-foreground p-3 rounded-lg rounded-tr-none">
<p class="text-sm text-background mt-1">太棒了！我已经把它加到第一天的行程里了。</p>
</div>
<p class="text-xs text-muted mt-1 text-right">下午 2:35</p>
</div>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8" data-alt="User avatar placeholder" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC4S8DuddcIcmPr7bTiSHJ1CyYTwBYt5i4KVmJQGli0aJaAOZZLXKaMVjkOfVwq1EjfgHjKTHkxVJEqurCFPILLadwY_8bHJ5sFPd2kBMIjJojYdPqoQgROrJ0-_-JSJlmz5yegdt0NizcUZxCI3GBNtJm7hBueUdu1uYJBQgDfON6J4hyEkxZNGSm00qFb3v02EYkKIJMniFmRfFXy_sgDEm_WAfLmPCZwdZb6_H4HoPD3Sj47mI07LRjZN5XWUzMB69o6gVcKUw");'></div>
</div>
</div>
<div class="p-4 border-t border-border">
<div class="relative">
<input class="w-full h-10 pl-4 pr-10 rounded-lg bg-card text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-gray-400" placeholder="输入消息..." type="text"/>
<button class="absolute inset-y-0 right-0 flex items-center justify-center w-10 text-muted hover:text-foreground transition-colors">
<span class="material-symbols-outlined text-xl">send</span>
</button>
</div>
</div>
</div>
</main>
</div>

</body></html>